<template>
  <div
    class="header"
    v-show="showabs"
    :style="opacityStyle"
  >
    城市详情
    <router-link to="/">
      <span class="iconfont icon-fanhui"></span>
    </router-link>
  </div>
</template>

<script>
    export default {
        name: "Header",
        data () {
          return {
            showabs:false,
            opacityStyle : {
               opacity : 0
            }
          }
        },
        methods :{
          handleScroll () {
           // console.log(document.documentElement.scrollTop);//页面向上滚动的距离
           const top=document.documentElement.scrollTop;
           if(top>60){//滚动高度大于60
             let opacity=top / 140;//计算透明值
             opacity > 1 ? 1 :opacity;//最大不能超过1
             this.opacityStyle={//重新赋值
               opacity
             }
             this.showabs=true;
           }else{
             this.showabs=false;
           }
          }
        },
        mounted () {//生命周期钩子函数(页面一展示该函数就会执行) (实现头部渐现的效果)
          console.log(1111);
          window.addEventListener('scroll',this.handleScroll);//绑定scroll事件，会执行handleScroll()函数
        }
    }
</script>

<style lang="stylus" scoped>
  .header{
    background-color:#00bcd4;
    height:.44rem;
    text-align:center;
    color:white;
    line-height .44rem
    font-size .16rem
    position fixed
    top:0;
    left:0;
    right:0;
    span{
      position absolute
      left .1rem
      top 0
      font-size .18rem
      color white
    }
  }
</style>
